import React from 'react'
import { Avatar, Button, Icon } from 'antd'
import { BaseResultItem } from '../BaseResultItem'
import style from './style.module.scss'

interface TeamResultItemProps {
    data: {
        id: string;
        teamName: string;
        projectName: string;
        img: string;
        membersAvatar: string[];
        memberNum: number;
        like: number;
    };
}

interface TeamResultItemState {

}

const TeamLikeBtn: React.FC<{data: number}> = (props: { data: number }) => (
    <Button shape={'round'} className={style.likeBtn}>
        <Icon type="heart"/>
        <span className={style.likeNum}>{props.data}</span>
    </Button>
)

const TeamAvatarGroup: React.FC<{ data: string[] }> = (props: { data: string[] }) => (
    <div className={style.avatarGroup}>
        {
            [...props.data].map((item, index) => (
                <Avatar size={52} src={item} key={index} className={style.avatarGroupItem}/>
            ))
        }<span className={style.avatarNum}>共{props.data.length}人</span>
    </div>
)

const TeamResultInfo: React.FC<TeamResultItemProps> = (props: TeamResultItemProps) => {
    return (
        <div>
            <h2>
                {props.data.teamName}
                <TeamLikeBtn data={props.data.like}/>
            </h2>
            <p>{props.data.projectName}</p>
            <TeamAvatarGroup data={props.data.membersAvatar}/>
        </div>
    )
}

export class TeamResultItem extends React.Component<TeamResultItemProps, TeamResultItemState> {
    render () {
        const data = this.props.data
        return (
            <BaseResultItem data={{ id: data.id, title: data.teamName, img: data.img }}>
                <TeamResultInfo data={this.props.data}/>
            </BaseResultItem>
        )
    }
}
